

<template>
  <footer class="footer footer-style-4 footer-dark">
    <div class="container">
      <div class="widget-wrapper">
        <div class="row">
          <div class="col-xl-8 col-lg-3 col-md-3 mx-auto">
            <div class="footer-widget">
              <div class="logo d-flex">
                <a href="#0"> <img src="https://cdn.iextend.top/pay/favicon.svg" alt=""></a><p class="fs-5 pt-2 pl-5">JackPay</p>
              </div>
              <p class="desc">JackPay让支付触手可得, 支持多种支付方式, 独立的账户系统,更清晰的数据展示!!!<br>注意: 本网站为Demo, 仅提供测试环境的支付测试, 只需一个apiKey即可使用</p>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright-wrapper">
        <p>@JackQuan版权所有<a class="pl-10" style="text-decoration: none;" href="https://beian.miit.gov.cn/#/Integrated/recordQuery">湘ICP备2023015335号-1</a></p>
      </div>
    </div>
  </footer>
</template>


<script lang="ts">

</script>

<style>
.footer-style-4 {
  background: #F3F3F3;
  padding-top: 80px;
}

.footer-style-4 .widget-wrapper .footer-widget {
  margin-bottom: 50px;
}

.footer-style-4 .widget-wrapper .footer-widget .logo {
  margin-bottom: 30px;
}

.footer-style-4 .widget-wrapper .footer-widget p.desc {
  margin-bottom: 30px;
}

.footer-style-4 .widget-wrapper .footer-widget .socials {
  justify-content: flex-start;
}

.footer-style-4 .widget-wrapper .footer-widget .socials li a {
  background: rgba(47, 128, 237, 0.4);
  margin: 0;
  margin-right: 10px;
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.footer-style-4 .widget-wrapper .footer-widget .socials li a:hover {
  background: #2F80ED;
}

.footer-style-4 .widget-wrapper .footer-widget h6 {
  font-weight: 600;
  color: #585978;
  margin-bottom: 35px;
  margin-top: 10px;
}

.footer-style-4 .widget-wrapper .footer-widget .links li a {
  font-size: 16px;
  line-height: 32px;
  color: #585978;
}

.footer-style-4 .widget-wrapper .footer-widget .links li a:hover {
  color: #2F80ED;
}

.footer-style-4 .widget-wrapper .footer-widget .download-app li a {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 5px;
  background: #ffffff;
  max-width: 200px;
  width: 100%;
  margin-bottom: 12px;
}

.footer-style-4 .widget-wrapper .footer-widget .download-app li a .icon {
  font-size: 35px;
  color: #323450;
  margin-right: 12px;
}

.footer-style-4 .widget-wrapper .footer-widget .download-app li a .text {
  font-size: 14px;
  font-weight: 500;
  color: #585978;
}

.footer-style-4 .widget-wrapper .footer-widget .download-app li a .text b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: "Fira Sans", sans-serif;
  color: #323450;
}

.footer-style-4 .copyright-wrapper {
  border-top: 1px solid rgba(88, 89, 120, 0.4);
  padding: 10px 0;
}

.footer-style-4 .copyright-wrapper p {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: rgba(88, 89, 120, 0.6);
}

.footer-style-4 .copyright-wrapper p a {
  color: inherit;
}

.footer-style-4 .copyright-wrapper p a:hover {
  color: #2F80ED;
}

.footer-style-4.footer-dark {
  background: #323450;
}

.footer-style-4.footer-dark .widget-wrapper .footer-widget p {
  color: #ffffff;
}

.footer-style-4.footer-dark .widget-wrapper .footer-widget h6 {
  color: #ffffff;
}

.footer-style-4.footer-dark .widget-wrapper .footer-widget .socials li a {
  background: rgba(255, 255, 255, 0.1);
}

.footer-style-4.footer-dark .widget-wrapper .footer-widget .socials li a:hover {
  background: #2F80ED;
}

.footer-style-4.footer-dark .widget-wrapper .footer-widget .links li a {
  text-decoration: none;
  color: #ffffff;
}

.footer-style-4.footer-dark .widget-wrapper .footer-widget .links li a:hover {
  color: #2F80ED;
}

.footer-style-4.footer-dark .copyright-wrapper p {
  color: rgba(255, 255, 255, 0.8);

}

</style>
